<!DOCTYPE html>
<html lang="en">
<head>
    <!--指定utf-8-->
    <meta charset="utf-8">
</head>
<body></body>

<div id="app">
    --------------不使用插槽时,期望的效果-------
    <p>我的书籍</p>
    <ul>
        <li>Java</li>
        <li>Linux</li>
        <li>Python</li>
    </ul>
    ----------------使用插槽时的效果-------
    <myBook>
        <!--使用props接收title-->
        <my-book-title slot="my-book-title" :title="title"></my-book-title>
        <my-book-book-name slot="my-book-book-name" v-for="item in items" :item="item"></my-book-book-name>
    </myBook>
</div>
<!--导入JS文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>

    // 需要变动数据的地方 写slot标签
    Vue.component("myBook", {
        template:
            `<div>
                <!--name指定插槽的名字-->
                <solt name="my-book-title"></solt>
                <ul>
                    <solt name="my-book-book-name"></solt>
                </ul>
            </div>`,
    })
    Vue.component("my-book-title", {
        props: ["title"],
        template:
            `<div>{{title}}</div>`
    })
    Vue.component("my-book-book-name", {
        props:["item"],
        template:
            `<li>{{item}}</li>`
    })

    var vm = new Vue({
        el: "#app",
        data: {
            title:"我的书籍(use slot)",
            items: ["Java", "Linux", "Go"],
        },
        methods: {}
    });
</script>
